/*
 1. 鼠标移入显示,移出隐藏
 目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
 3. 输入搜索关键字, 列表显示匹配的结果
 4. 点击显示或者隐藏更多的分享图标
 5. 鼠标移入移出切换地址的显示隐藏
 6. 点击切换地址tab

 7. 鼠标移入移出切换显示迷你购物车
 8. 点击切换产品选项 (商品详情等显示出来)

 9. 点击向右/左, 移动当前展示商品的小图片
 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
 */
$(function () {
      // 1. 鼠标移入显示,移出隐藏
      // 目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
  showhhideen()
  // 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
     hoverSubMenu()
  // 3. 输入搜索关键字, 列表显示匹配的结果
     search()
   //  4. 点击显示或者隐藏更多的分享图标
  share ()
   // 5 .  5. 鼠标移入移出切换地址的显示隐藏
   Moveing_address()
   //   6. 点击切换地址tab
  clickTable()
   //  7. 鼠标移入移出切换显示迷你购物车
   Buy_cart()
   //  8. 点击切换产品选项 (商品详情等显示出来)
   Toggle_Product()
   //   9. 点击向右/左, 移动当前展示商品的小图片
   MovingMi_image()
   //   10. 当鼠标悬停在某个小图上,在上方显示对应的中图
  Show_Medium_Image()
  //  11 .当鼠标在中图上移动时, 显示对应大图的附近部分区域

    BigImage()
    function  BigImage() {
      var $mediumImg = $('#mediumImg')
      var $mask = $('#mask') //移动的小黄快
      var $maskTop = $('#maskTop') //绑定监听 hover
      var $largeImgContainer = $('#largeImgContainer')
      var $loading = $('#loading')
      var $largeImg = $('#largeImg')
      var MaskWidth = $mask.width()
      var MaskHeight  = $mask.height()
      //图片的大小
      var MaskTopWidth = $maskTop.width()
      var MaskTopHeight = $maskTop.height()
      $maskTop.hover(function () {
        //显示小黄快
        $mask.show()
        //小黄快跟随鼠标移动;
        //动态加载大图，获取中图的地址替换成大图的地址
        var src = $mediumImg.attr('src').replace('-m','-l')
        $largeImg.attr('src',src)
        $largeImgContainer.show()
        //我们要获取图片的高度和宽度，必须要在图片加载完成之后才能获取
        $largeImg.on('load',function () {
          //在图片加载完成以后，鼠标才开始移动事件
          $mask.show()
          //小黄快跟随鼠标移动;
          $maskTop.mousemove(function (event) {
            event = window.event || event
            //给mask值重新定位
            var left = 0
            var top = 0
            //left top 值有一个区间大小
            var Currentleft = event.offsetX
            var CurrentTop = event.offsetY
            // console.log(Currentleft,CurrentTop)
            left = Currentleft - MaskWidth/2
            top  = CurrentTop - MaskHeight/2
            if(left<0)
            {
              left = 0
            }else if(left>MaskTopWidth-MaskWidth){
              left = MaskTopWidth-MaskWidth
            }
            //
            if(top<0)
            {
              top = 0
            }else if(top>MaskTopHeight-MaskHeight){
              left = MaskTopHeight-MaskHeight
            }
            $mask.css({
              left : left ,
              top : top
            })
          })
          $largeImg.show()
          //大图加载完成loading需要隐藏
          $loading.hide()
          //console.log($largeImg.width(),$largeImg.height())
        })
      },function () {
        $mask.hide()

      })
    }

    function  Show_Medium_Image() {
    //找到绑定监听的元素
      var $lis = $('#icon_list').children()
      $lis.hover(function () {
        //为li下的image 添加一个classb,改变上面图片的地址;
        $image = $(this).children()
        $image.addClass('hoveredThumb')
        //显示对应的中图
        var src = $image.attr('src').replace('.jpg','-m.jpg')
        $('#mediumImg').attr('src',src)

      },function () {
        $(this).children().removeClass('hoveredThumb')
      })
    }
     function MovingMi_image() {
        var $as = $('#preview>h1>a')   //绑定监听的两个按钮元素
        var $backward = $as.first()
        var $forward  = $as.last()
        var $UL = $('#icon_list') //ul下的li 如果li的个数>当前显示图片的个数按钮可以被释放能够被点击
        var SHOW_COUNT = 5 //当前所能显示图片的个数
        var ImageCount = $UL.children("li").length
        var Moving_Count = 0 //表示移动的次数
        var liWidth = $UL.children(':first').width() //移动left数值
        //进行初始化更新
        if(ImageCount > SHOW_COUNT) //当前显示的图片小于所有的图片才能被移动，按钮可以被点击，css样式被更改
        {
          $forward.attr('class','forward')
        }
        $forward.click(function () {
           //判断是否到达了最右边
           if(Moving_Count === ImageCount - SHOW_COUNT)
           {
                return
           }
          Moving_Count++
          //更新向左的按钮
          $backward.attr('class','backward')
          //更新向右的按钮
          if(Moving_Count === ImageCount - SHOW_COUNT)
          {
            $forward.attr('class','forward_disabled')
          }
          //移动图片
          $UL.css({
            left :  -Moving_Count * liWidth
          })
        })
       $backward.click(function () {
         //判断是否到达了最左边
         if(Moving_Count === 0)
         {
           return
         }
         Moving_Count--
         //更新向左的按钮
         $forward.attr('class','forward')
         //更新向右的按钮
         if(Moving_Count === 0)
         {
           $backward.attr('class','backward_disabled')
         }
         //移动图片
         $UL.css({
           left :  -Moving_Count * liWidth
         })
       })
      }
     function Toggle_Product() {
      var $parent = $('#product_detail')
      var $lis = $parent.children('ul').children("li") //下标是相互对应的
      var $divs = $parent.children('div:not(#minicart)')
      $lis.click(function () {
        var index = $(this).index()
        var div = $divs[index]
        $lis.removeClass('current')
        $lis[index].className = "current"
        $divs.hide()
        //
        div.style.display = 'block'
     })
  }
     function  Buy_cart() {
     $('#minicart').hover(function () {
         $(this).addClass("minicart") //添加一个class属性
         $(this).children('div').show() //显示

     },function () {
       $(this).removeClass('minicart') //添加一个class属性
       $(this).children('div').hide() //显示
     })
     }
     function  clickTable() {
      var $lis = $("#store_tabs>li")
      $lis.click(function () {
        //现将所有class都移出，在给当前元素添加
        $lis.removeClass()
        $(this).addClass("hover")
      })
    }
     function Moveing_address() {
      var $select = $('#store_select')

      $select .hover(function () {
        $(this).children(':gt(0)').show()
      },function () {
        $(this).children(':gt(0)').hide()
      })
        .children(':last')
        .click(function () {
          $select.children(':eq(1)').hide()
        })
    }
     function share () {
    var isOpen = false //标识当前的状态(初始为关闭)
    var $shareMore = $('#shareMore')
    var $parent = $shareMore.parent()
    var $as = $shareMore.prevAll('a:lt(2)')
    var $b = $shareMore.children()

    $shareMore.click(function () {

      if(isOpen) { // 去关闭
        isOpen = false
        $parent.css('width', 155)
        $as.hide()
        $b.removeClass('backword')
      } else { // 去打开
        isOpen = true
        $parent.css('width', 200)
        $as.show()
        $b.addClass('backword')
      }

      // isOpen = !isOpen
    })
  }
     function  search() {
    $('#txtSearch').on('focus keyup',function () {
      //当有输入的时候显示,空格不算
      var text = $.trim(this.value)  //去掉空格
      if(text)
      {
        $('#search_helper').show()
      }


    }).blur(function () {
      $('#search_helper').hide()
    })
  }
     function showhhideen() {
     // 1：为哪些元素绑定监听
     // 2：绑定什么监听
     // 3：改变的是哪个属性值 哪些元素进行DOM操作
      $('[name=show_hide]').hover(function () {
       // alert(this.id)
       var id = this.id + "_items"
        $('#'+id).show()

      },function () {
        var id = this.id + "_items"
        $('#'+id).hide()
      })
   }
     function  hoverSubMenu ()  {
     $('#category_items>div').hover(function () {
          $(this).children('.sub_cate_box').show()

     },function () {
       $(this).children('.sub_cate_box').hide()

     })
     
   }

})